import React, { useState } from 'react'
import "./Recharge.css"
import { Down } from '@react-vant/icons'
import { Space } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { NumberKeyboard, } from '@nutui/nutui-react'
import { Button, Toast } from 'antd-mobile'

Toast 
export default function Recharge() {
    const navigate = useNavigate()
    const [v1, setV1] = useState("")
    const [visible, setVisible] = useState(false)
    const id=JSON.parse(localStorage.getItem("user"))._id
    const [arr, setArr] = useState([
        { id: 1, name: "10元", value: '10' },
        { id: 2, name: "20元", value: '20' },
        { id: 3, name: "60元", value: '60' },
        { id: 4, name: "100元", value: '100' },
        { id: 5, name: "200元", value: '200' },
        { id: 6, name: "250元", value: '250' },
        { id: 7, name: "500元", value: '500' },
        { id: 8, name: "750元", value: '750' },
        { id: 9, name: "1,000元", value: '1000' },
    ])

    const onChanges = (number) => {
        if(v1.length<=3){
            setV1(prevValue => prevValue + number);
        }
    }

    const onDelete = () => {
        setV1(prevValue => prevValue.slice(0, -1));
    }


    return (
        <div>
            <div className="top">
                <div className="return">
                    <span className="icon">
                        <Space gap={20}>
                            <Down className="leftIcon" onClick={() => { navigate("/all/money") }} />
                        </Space>
                    </span>
                    <span className="top-cart">钱包充值</span>
                </div>
            </div>
            <div className="calculator-top">请输入充值金额</div>

            <input
                type="text"
                className="calculator-center"
                value={v1 == "" ? 0 + "元" : v1 + "元"}
                onChange={(e) => { setV1((e.target.value).replace("元","")) }}
                onFocus={() => { setVisible(true) }}
            />

            <div className="calculator-center1">
                {
                    arr.map(item => {
                        return <div className="calculator-son" key={item.id} onClick={() => { setV1(item.value) }}>{item.name}</div>
                    })
                }
            </div>

            <Button block color='primary' size='large' className='price-button' loading='auto' loadingText='正在加载' onClick={async()=>{
                navigate("/manner",{state:{price:v1}})
            }}>
                继续
            </Button>

            <NumberKeyboard
                visible={visible}
                type="rightColumn"
                custom={['.', 'x']}
                onChange={onChanges}
                onDelete={onDelete}
                onClose={() => setVisible(false)}
                onConfirm={() => { setVisible(false) }}
            />

        </div>
    )
}